<template>
  <div>
    <headNav  :isHome="isHome" :signIn="!isHome" :isBack="isHome" ></headNav>
  
    <div class="flexHeight" style="align-items: center;" >
      <div class="flexCenter inputDiv" >
        <span>教师姓名：</span>
        <input type="text"  v-model="userWrite.name" placeholder="请输入姓名" :disabled="disabledName" maxlength="10"/>
      </div>
      <div class="flexCenter inputDiv choiceCss" >
        <span>年级：</span>
        <div @click="choiceClick(4)" style="color: #bbb6b6;" v-if="!userWrite.grades" >请选择年级</div>
        <div @click="choiceClick(4)" v-else >{{userWrite.grades.name}}</div>
        <span class="symbol" >▼</span>
      </div>
      <!-- <div class="flexCenter inputDiv choiceCss" >
        <span>学科：</span>
        <div @click="subjectClick" style="color: #bbb6b6;" v-if="userWrite.subject.length == 0" >请先选择年级</div>
        <div @click="subjectClick" v-else style="display: flex; flex-wrap: wrap; padding: 0.1rem 0.2rem; overflow-y: auto;" >
          <span v-for="(val, index) in userWrite.subject" :key="inedx" >{{val.name}}&#8194;</span>
        </div>
      </div> -->
      <div class="flexCenter inputDiv" >
        <span>班级名称：</span>
        <input type="text" @blur='inputBlur' v-model="userWrite.class" placeholder="例如: 1班" maxlength="10" />
      </div>

      <!-- <div class="flexCenter inputDiv establishCss" >
        <check-icon :value.sync="demo1">填写班级详细信息</check-icon>
      </div> -->
      <template v-if="demo1" >
        <div class="flexCenter inputDiv choiceCss" >
          <span>班级对应学校：</span>
          <div @click="choiceClick(1)" style="color: #bbb6b6;" v-if="!userWrite.school" >获取位置</div>
          <div @click="choiceClick(1)" v-else >{{userWrite.school}}</div>
          <span class="symbol" >▼</span>
        </div>
        <div class="flexCenter inputDiv" >
          <span>班级对应学校码：</span>
          <input type="text" v-model="userWrite.code" @blur="codeBlur" style="width: 4.1rem;" placeholder="通过学校管理员获得" />
        </div>
        <div class="flexCenter inputDiv choiceCss" >
          <span>班级对应学段：</span>
          <div @click="choiceClick(2)" style="color: #bbb6b6;" v-if="!userWrite.learningSection" >请选择学段</div>
          <div @click="choiceClick(2)" v-else >{{userWrite.learningSection.name}}</div>
          <span class="symbol" >▼</span>
        </div>
        <div class="flexCenter inputDiv choiceCss" >
          <span>班级对应学级：</span>
          <div @click="choiceClick(3)" style="color: #bbb6b6;" v-if="!userWrite.grade" >请先选择学段</div>
          <div @click="choiceClick(3)" v-else >{{userWrite.grade.name}}</div>
          <span class="symbol" >▼</span>
        </div>
      </template>
      <button type="default" @click="createClick" >创建班级</button>
      <div class="pictureCss" @click="$router.push('joinClass')" >
        <span style="font-size: 0.28rem;" >加入班级 </span>
        <img src="@/assets/img/my/arrow.png" mode="" >
      </div>
    </div>
    <!-- 选择亲属关系 & 证件类型 & 性别弹窗 -->
    <popup v-model="show1">
      <popup-header
      :left-text="'取消'"
      :right-text="'确定'"
      :title="title"
      :show-bottom-border="false"
      @on-click-left="show1 = false"
      @on-click-right="determineClick"></popup-header>
      <group gutter="0" >
        <radio :options="choiceList" v-model="choiceValue" ></radio>
      </group>
    </popup>
    <!-- 选择学科按钮弹窗 -->
    <!-- <x-dialog v-model="showHideOnBlurs" class="dialog-demo" hide-on-blur>
     <div>
      <div class="establishCss" >
        <span style="font-size: 0.35rem; font-weight: 600;" >勾选学科</span>
        <checklist title="" :options="subjectList" v-model="checklistVal" @on-change="subjectChange"  ></checklist>
      </div>
     </div>
    </x-dialog> -->
  </div>
</template>

<script>
import headNav from '@/components/headNav/headNav.vue'
import { mapActions, mapState, mapGetters, mapMutations } from 'vuex'
import { postCreateClassApi, getQRCodeApi, getDefaultSchoolApi, getLearningSectionApi, getTeacherInfoApi, getTeacherGradeApi, getTeacheSubjectApi, getTeacherApi } from '@/api/myNewApi'
import { PopupHeader, Popup, Radio, Group, CheckIcon, XDialog, Checklist  } from 'vux'
import cookie from '@/util/cookie'
import {refreshToken} from '@/api/commonApi'
export default {
  components: {
    headNav,
    PopupHeader,
    Popup,
    Radio,
    Group,
    CheckIcon,
    XDialog,
    Checklist
  },
  computed: {
    ...mapState({
      studentId: state => state.user.studentId,
      roleCode: state => state.user.roleCode,
      teacherId: state => state.user.teacherId
    })
  },
  data () {
    return {
      checklistVal: [],
      isHome: false,
     
      disabledName: false,
      defaultSchool: '',  // 默认学校信息
      demo1: false,
      title: '',
      show1: false,
      showHideOnBlurs: false,
      choiceValue: '',   //  下拉框选择的数据
      learningSectionList: [], // 学段数组
      gradeList: [], // 学级数组
      gradeLists: [], // 年级数组
      subjectList: [],  // 学科数组
      userWrite: {
        name: '',
        class: '',
        school: '',
        code: '',
        learningSection: '',  // 学段
        grade: '',  // 学级
        grades: '',  // 年级
        subject: []  // 学科
      },
      choiceList: [],
      enumeration: [
        {key: 1, valCode: false, value: '女', valName: '女'},
        {key: 2, valCode: true, value: '男', valName: '男'}
      ]
    }
  },
  methods: {
    inputBlur () {
       window.scrollTo(0, 0)
    },
    // 勾选学科触发事件
    subjectChange () {
      this.userWrite.subject = []
      for (let i of this.subjectList) {
        for (let j of this.checklistVal) {
          if (i.id == j) {
             this.userWrite.subject.push(i)
          }
        }
      }
      console.log(this.userWrite.subject)
    },
    // 下拉框确定触发事件
    async determineClick () {
      if (this.choiceNum == 2) {
        for (let i of this.learningSectionList) {
          if (i.id == this.choiceValue) {
            this.userWrite.learningSection = i
            this.gradeList = i.grade
          }
        }
      }
      if (this.choiceNum == 3) {
        for (let i of this.gradeList) {
          if (i.id == this.choiceValue) {
            this.userWrite.grade = i
          }
        }
      }
      if (this.choiceNum == 4) {
        for (let i of this.gradeLists) {
          if (i.id == this.choiceValue) {
            this.userWrite.grades = i
          }
        }
        // let res = await getTeacheSubjectApi(this.userWrite.grades.stageId)
        // console.log(res)
        // for (let i of res) {
        //   this.$set(i, 'value', i.name)
        //   this.$set(i, 'key', i.id)
        // }
        // this.subjectList = res
      }
      this.show1 = false
    },
    // 创建班级按钮触发事件
    async createClick () {
      this.userWrite.name = this.userWrite.name.replace(/\s*/g,"")
      this.userWrite.class = this.userWrite.class.replace(/\s*/g,"")
      if (!this.userWrite.name || !this.userWrite.class || !this.userWrite.grades) {
        this.$vux.toast.text('请完整填写创建班级信息', 'middle')
        return
      }

      if (this.userWrite.name.length > 6) {
        this.$vux.toast.text('教师姓名过长，请重新输入', 'middle')
        return
      }

      if (this.userWrite.class.length > 10) {
        this.$vux.toast.text('班级名称过长，请重新输入', 'middle')
        return
      }


      this.$vux.confirm.show({
          title: '提示',
          content: '是否确定创建班级？',
          onConfirm : async () => {
            let params = {
              teacherName: this.userWrite.name,
              className: this.userWrite.class,
              gradeId: this.userWrite.grades.id
            }
            let res = await postCreateClassApi(params)
            console.log(res)
            this.$vux.toast.text('创建成功', 'middle')
            this.$store.state.user.reloadToken = true
            await this.$store.dispatch('user/refreshAccessToken')
            await this.$store.dispatch('user/getTeacherByLoginUserId')
            
            this.$router.push('myClassClass')
          },
          onCancel () {
          }
      })
    },
    // 班级码输入框失去焦点触发
    async codeBlur () {
      // this.learningSectionList = []
      // this.gradeList = []
      let num = await getQRCodeApi(this.userWrite.code)
      console.log(num)
    },
    // 下拉框点击触发事件
    choiceClick (e) {
      // this.choiceValue = ''
      if (e == 1) {
        this.choiceList = this.enumeration
        this.title = '班级对应学校'
        this.choiceNum = 1
      }
      if (e == 2) {
        this.choiceList = this.learningSectionList
        this.title = '班级对应学段'
        this.choiceNum = 2
        if (this.userWrite.learningSection) {
          this.choiceValue = this.userWrite.learningSection.id
        }
      }
      if (e == 3) {
        this.choiceList = this.gradeList
        this.title = '班级对应学级'
        this.choiceNum = 3
        if (this.userWrite.grade) {
          this.choiceValue = this.userWrite.grade.id
        }
      }
      if (e == 4) {
        this.choiceList = this.gradeLists
        this.title = '请选择年级'
        this.choiceNum = 4
        if (this.userWrite.grades) {
          this.choiceValue = this.userWrite.grades.id
        }
      }
      this.show1 = true
    },
    // 点击学科选项触发事件
    subjectClick () {
      if (!this.userWrite.grades) {
        this.$vux.toast.text('请先选择年级', 'middle')
        return
      }
      this.showHideOnBlurs = true
    },
    // 根据学校ID获取年级封装
    async packGrade (res) {
      this.gradeLists = []
      for (let i of res) {
        this.$set(i, 'value', i.name)
        this.$set(i, 'key', i.id)
        this.gradeLists.push(i)
      }
      console.log(res)
    },
    // 获取默认学校学段学级封装
    async packDefault () {
      this.learningSectionList = []
      this.gradeList = []
      let school = await getDefaultSchoolApi()
      this.defaultSchool = school
      let res = await getLearningSectionApi(school.id)


      this.learningSectionList = res

      console.log(this.gradeLists)
    },

  },
  async mounted() {
    localStorage.removeItem('role')
    
    let res = await getTeacherGradeApi()
    this.packGrade(res)
    
    // if (!localStorage.getItem("role") || localStorage.getItem("role") == undefined) {
    if (this.roleCode){
      this.isHome = true
     
      this.disabledName = true
      let user = await getTeacherInfoApi(cookie.get('teacherId'))
      this.userWrite.name = user.name
      
    } else {
      this.isHome = false
    
      
      try {
        let teacher = await getTeacherApi()
        this.userWrite.name = teacher.name
        this.disabledName = true
        
      }
      catch (e) {
        this.userWrite.name = ''
        this.disabledName = false
        
      }

    }


  }
}
</script>

<style lang="less" scoped >
.establishCss {
  padding: 0.3rem 0.2rem;
}

.pictureCss {
  display: flex;
  align-items: center;
  img {
    width: 0.13rem;
    height: 0.2rem;
    margin-left: 0.15rem;
  }
}

button {
  width: 5.6rem;
  height: 0.84rem;
  background: #128FEF;
  color: #FFF;
  border-radius: 0.42rem;
  font-size: 0.32rem;
  border: 0;
  margin: 0.7rem 0 0.4rem 0;
}

.choiceCss {
  position: relative;
  .symbol {
    position: absolute;
    top: 0.25rem;
    right: 0.3rem;
    font-size: 0.25rem;
  }
  div {
    width: 4.25rem;
    height: 0.85rem;
    border: 0;
    border-radius: 0.2rem;
    padding-left: 0.3rem;
    font-size: 0.28rem;
    background: #FFF;
    display: flex;
    align-items: center;
  }
}

.inputDiv {
  font-size: 0.28rem;
  margin-top: 0.4rem;
  input {
    width: 4.7rem;
    height: 0.85rem;
    border: 0;
    border-radius: 0.2rem;
    padding-left: 0.3rem;
    font-size: 0.28rem;
  }
}

.flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flexHeight {
  display: flex;
  flex-direction: column;
}

.flexAlign {
  display: flex;
  align-items: center;
}

.flexEdge {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
<style>
.establishCss .vux-check-icon > .weui-icon-success:before, .vux-check-icon > .weui-icon-success-circle:before {
  color: #128FEF!important;
}

.establishCss .weui-cell:before {
  border: none!important;
}

.establishCss .weui-cells:before {
  border: none!important;
}

.establishCss .weui-cells:after {
  border: none!important;
}

.establishCss .weui-cells_checkbox .weui-check:checked + .vux-checklist-icon-checked:before {
  color: #128FEF!important;
}
</style>
